<template>
  <div class="app-container flex column" style="position: relative">
    <div v-has="'law-record:add'" class="add-btn cursor" @click="handelAdd">新增</div>
    <top-title :content="content" :updateTime="false"></top-title>

    <div class="item-wrap f1 flex">
      <div class="left bg f1 flex column">
        <div class="common-title flex align-center">
          <div class="icon"></div>
          <div class="context">条文</div>
        </div>

        <div class="search-group" style="padding: 10px">
          <div class="input-wrap">
            <div class="label">法律条文名称:</div>
            <div class="input-item">
              <a-input v-model="queryParam.articleNo" :maxLength="30" clearable placeholder="请填写法律条文名称" />
            </div>
          </div>

          <div class="btn-wrap">
            <a-button class="searchBtn" type="primary" @click="searchQuery()"> 搜索 </a-button>
            <a-button class="resetBtn" type="primary" @click="searchReset()"> 重置 </a-button>
          </div>
        </div>

        <div class="f1">
          <a-table
            :columns="columns"
            :customRow="Rowclick"
            :dataSource="dataSource"
            :pagination="ipagination"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            class="tableList"
            rowKey="id"
            @change="handleTableChange"
          >
            <template slot="title" slot-scope="records">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ records.title }} </span>
                </template>
                <span>{{ records.title }} </span>
              </a-tooltip>
            </template>
            <template slot="action" slot-scope="records">
              <span v-has="'law-record:edit'" class="operation deatil-color" @click="handelEdit(records)">编辑</span>
              <span v-has="'law-record:delete'" class="operation warnColor" @click="showDelete(records)">删除</span>
            </template>
          </a-table>
        </div>
      </div>
      <div class="right bg f1 flex column">
        <div class="common-title flex align-center">
          <div class="icon"></div>
          <div class="context">条文详情</div>
        </div>

        <a-card v-if="selectionRows.length > 0" :bordered="false" style="height: 700px; overflow: scroll">
          <div v-for="(item, index) in selectionRows" :key="index" class="container">
            <p class="title" v-html="item.articleNo"></p>
            <p class="context" v-html="item.articleContent"></p>
          </div>
        </a-card>
        <a-card v-else :bordered="false" style="height: 700px">
          <a-empty>
            <span slot="description"> 请先选择条文! </span>
          </a-empty>
        </a-card>
      </div>
    </div>
    <add-modal ref="addModal" @refresh="searchQuery()"></add-modal>
    <allMessage
      ref="allMessage"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>

<script>
import topTitle from '@/components/topTitle'
import addModal from './modules/addContent'
import allMessage from '@/components/allMessage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { lawArticleDelete } from '@/api/law'
import { getAction } from '@/api/manage'
export default {
  name: '',
  components: { topTitle, addModal, allMessage },
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: '/regulations/article/page',
      },
      content: [['法律法规'], ['详情']],
      queryParam: {},
      publicVisible: false,
      disableMixinCreated: true,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '名称',
          dataIndex: 'articleNo',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '添加账号',
          dataIndex: 'createBy',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '排序值',
          dataIndex: 'regulationsOrder',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
        },
      ],
    }
  },
  mounted() {
    if (this.$route.query.params && this.$route.query.params.constructor === Object) {
      let params = this.$route.query.params
      localStorage.setItem('searchParams2', JSON.stringify(params)) // 持久化储存 刷新使用
      this.queryParam = {
        ...params,
      }
      this.searchQuery()
    } else {
      this.queryParam = {
        ...JSON.parse(localStorage.getItem('searchParams2')),
      }
      this.searchQuery()
    }
  },
  methods: {
    searchQuery(arg) {
      var params = this.getQueryParams() //查询条件
      this.loading = true
      getAction(this.url.list, params)
        .then((res) => {
          if (res.code == 200) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
            if (!this.selectedRowKeys.length > 0 && this.dataSource.length > 0) {
              this.selectionRows.push(this.dataSource[0])
              this.selectedRowKeys.push(this.dataSource[0].id)
            }
            if (this.dataSource.length == 0) {
              this.selectionRows = []
              this.selectedRowKeys = []
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
          this.resetTime = false
        })
    },

    handelAdd() {
      let params = {
        regulationsId: this.queryParam.regulationsId,
      }
      this.$refs.addModal.show(params)
    },
    handelEdit(record) {
      record.regulationsId = this.queryParam.regulationsId
      this.$refs.addModal.show(record)
    },
    Rowclick(record, index) {
      return {
        on: {
          click: () => {
            this.selectionRows = []
            this.selectedRowKeys = []
            this.selectionRows.push(record)
            this.selectedRowKeys.push(record.id)
          },
        },
      }
    },
    searchReset() {
      if (this.queryParam.regulationsId) {
        let id = this.queryParam.regulationsId
        this.queryParam = {}
        this.queryParam.regulationsId = id
      } else {
        this.queryParam = {}
      }
      this.resetTime = true
      this.loadData(1)
    },
    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },
    tipMessage(records) {
      lawArticleDelete({ id: records.id })
        .then((res) => {
          this.$message.success(res.message)
          this.publicVisible = false
          this.searchQuery()
        })
        .catch((err) => {
          this.publicVisible = false
          this.$message.success(res.message)
        })
    },
  },
  destroy() {},
}
</script>

<style lang="less" scoped>
/deep/ .ant-card {
  background: var(--theme-container-bg);
  color: #1163b8;
}
.add-btn {
  top: 0.1rem;
}

.app-container {
  background: var(--theme-content-bg);
  padding-top: 0;

  .item-wrap {
    margin-top: 0.1rem;
    .bg {
      background: var(--theme-container-bg);
      padding: 14px 0;
    }

    .common-title {
      height: 0.46rem;
      line-height: 0.46rem;
      padding-left: 0.26rem;
      border-bottom: 2px solid var(--theme-input-border);
      transform: translateY(-6px);
      .icon {
        width: 8px;
        height: 8px;
        background: #1388ff;
        border-radius: 50%;
        margin-right: 8px;
      }
      .context {
        font-size: 0.16rem;
        font-weight: 500;
        color: #1388ff;
      }
    }

    .right {
      margin-left: 16px;
      .container {
        margin: 0.3rem 0.6rem;
        font-weight: 500;

        .title {
          margin-bottom: 0.28rem;
          font-size: 18px;
          color: #1388ff;
        }
        .context {
          font-size: 16px;
          color: #509eee;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
